<template>
  <div class="statistics">
    <div style="display: flex; justify-content: space-between">
      <div>
        <el-button type="primary" @click="addFromDialog4 = true" size="mini"
          >查看分红</el-button
        >
      </div>
      <!-- 新增订单 -->

      <div>
        <el-input size="mini"
          style="width: 250px"
          v-model="input"
          placeholder="输入客户名称,版号,产品名称"
        ></el-input>
        <!-- 搜索 -->
        <el-button size="mini"
          icon="el-icon-search"
          circle
          style="margin-left: 20px"
          @click="likeEmployee()"
        ></el-button>

        <!-- <el-select
          v-model="receiptsStatusValue"
          style="width: 150px"
          placeholder="入库状态"
        >
          <el-option
            v-for="item in receiptsStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
        <!-- <el-button type="success" @click="receiptsStatusSelect">查询</el-button> -->
      </div>
    </div>

    <!-- 收益排行 -->
    <el-dialog
      style="margin-top: 0"
      :visible.sync="addFromDialog4"
      width="50%"
      :show-close="false"
      title="收益排行"
    >
      <el-select v-model="datebase" @change="dayPlay" placeholder="请选择日期">
        <el-option
          v-for="item in options4"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div style="height: 20px"></div>

      <el-table :data="tableDataDay" border style="width: 100%">
        <el-table-column prop="rank" label="排名" width="80"> </el-table-column>
        <el-table-column prop="userId" label="姓名" fit>
        </el-table-column>
        <el-table-column prop="price" label="金额" width="120">
        </el-table-column>
      </el-table>
    </el-dialog>

    <div class="goods-table">
      <el-table
        class="table01"
        :data="tableData"
        v-loading="loading"
        border
        style="width: 100%"
        height="100%"
        :row-style="tableRowClassName"
      >
        <el-table-column prop="i" label="序号" width="50" fixed>
          <template slot-scope="scope">
            {{ serializeNumber(scope.row.i) }}
          </template>
        </el-table-column>

        <el-table-column prop="name" label="客户名称" fit width="100" fixed v-if="qx">
        </el-table-column>
        <el-table-column prop="versionNumber" label="版号" fit width="90">
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" fit width="150">
        </el-table-column>

        <el-table-column prop="price" label="价格" fit width="55" v-if="qx">
        </el-table-column>
        <el-table-column prop="deliveryTime" label="交货日期" fit width="80">
        </el-table-column>
        <el-table-column prop="isSend" label="是否发货" fit width="80">
          <template slot-scope="scope">
            {{ scope.row.isSend == 0 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="stOne" label="绘图" fit width="120">
        </el-table-column>
        <el-table-column prop="stTwo" label="切割" fit width="120">
        </el-table-column>
        <el-table-column prop="stThree" label="装刀" fit width="120">
        </el-table-column>
        <el-table-column prop="stFour" label="装线" fit width="120">
        </el-table-column>
        <el-table-column prop="stFive" label="打包" fit width="120">
        </el-table-column>
        <el-table-column prop="surPrice" label="附加费" fit width="70">
        </el-table-column>
        <!-- <el-table-column prop="stOne" label="流水线" fit width="120">
          <template slot-scope="scope">
            <el-popover placement="right" width="400" trigger="hover">
              <div
                style="
                  font-weight: bold;
                  color: green;
                  border: 1rpx solid #edf0f6;
                "
              >
                我的收益: {{ yuer.price }}
              </div>
              <div>
                <div>绘图：{{ scope.row.stOne }}</div>

                <div>切割：{{ scope.row.stTwo }}</div>

                <div>装刀：{{ scope.row.stThree }}</div>

                <div>装线：{{ scope.row.stFour }}</div>

                <div>打包：{{ scope.row.stFive }}</div>

                <div>附加费：{{ scope.row.surPrice }}</div>
              </div>
              <button
                style="
                  background-color: white;
                  padding: 5px;
                  color: gray;
                  border-radius: 5px;
                "
                size="mini"
                slot="reference"
                v-on:mouseenter="handleMouseEnter(scope.row.customId)"
                v-on:mouseleave="handleMouseLeave"
              >
                流水线
              </button>
            </el-popover>
          </template>
        </el-table-column> -->

        <!-- <el-table-column prop="surPrice" label="附加费" fit width="80">
        </el-table-column> -->
        <el-table-column prop="count" label="错误原因" fit width="80">
        </el-table-column>
        <el-table-column prop="head" label="负责人" fit width="80">
        </el-table-column>
        <el-table-column
          prop="triggerSituation"
          label="处罚情况"
          fit
          width="80"
        >
        </el-table-column>
        <el-table-column prop="deliveryId" label="出货单" fit width="80">
        </el-table-column>
        <el-table-column prop="count" label="备注   " fit width="80">
        </el-table-column>
        <el-table-column prop="userId" label="操作" width="60" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="more(scope.row)">更多</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 查看更多 -->
    <el-dialog
      style="margin-top: 0"
      :visible.sync="addFromDialog2"
      width="74%"
      :show-close="false"
      title="更多信息"
    >
      <el-form
        :model="genduo"
        :inline="true"
        ref="genduo"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 序号 -->
        <!-- <el-form-item label="序号：" prop="cusNum">
          <el-input
            type="text"
            v-model="genduo.cusNum"
            placeholder="序号"
          ></el-input>
        </el-form-item> -->
        <!-- 客户名称 -->
        <el-form-item label="客户名称：" prop="name">
          <el-input
            type="text"
            v-model="genduo.name"
            placeholder="客户名称"
          ></el-input>
        </el-form-item>
        <!-- 版号 -->
        <el-form-item label="版号：" prop="versionNumber">
          <el-input
            type="text"
            v-model="genduo.versionNumber"
            placeholder="版号"
          ></el-input>
        </el-form-item>
        <!-- 产品名称 -->
        <el-form-item label="产品名称：" prop="productName">
          <el-input
            type="text"
            v-model="genduo.productName"
            placeholder="产品名称"
          ></el-input>
        </el-form-item>
        <!-- 价格 -->
        <el-form-item label="价格：" prop="price">
          <el-input
            type="text"
            v-model="genduo.price"
            placeholder="价格"
          ></el-input>
        </el-form-item>
        <!-- 交货日期 -->
        <el-form-item label="交货日期" prop="deliveryTime">
          <el-input
            type="text"
            v-model="genduo.deliveryTime"
            placeholder="数量"
          ></el-input>
        </el-form-item>
        <!-- 是否发货 -->
        <el-form-item label="是否发货：" prop="isIncludingTax">
          <el-select v-model="genduo.isSend" placeholder="是否发货">
            <el-option
              v-for="item in SexCategory"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 绘图 -->
        <el-form-item label="绘图：" prop="stOne">
          <div style="display: flex">
            <el-input
              type="text"
              style="font-size: 12px"
              v-model="genduo.stOne"
              placeholder="绘图"
            ></el-input>
            <div style="width: 10px"></div>
            <!-- <el-checkbox v-model="check1" @change="stUpdate('check1', 1)"
              >选择</el-checkbox
            > -->
          </div>
        </el-form-item>

        <!-- 切割 -->
        <el-form-item label="切割：" prop="stTwo">
          <div style="display: flex">
            <el-input
              type="text"
              style="font-size: 12px"
              v-model="genduo.stTwo"
              placeholder="切割"
            ></el-input>
            <div style="width: 10px"></div>
            <!-- <el-checkbox v-model="check2" @change="stUpdate('check2', 2)"
              >选择</el-checkbox
            > -->
          </div>
        </el-form-item>

        <!-- 装刀 -->
        <el-form-item label="装刀：" prop="stThree">
          <div style="display: flex">
            <el-input
              type="text"
              style="font-size: 12px"
              v-model="genduo.stThree"
              placeholder="装刀"
            ></el-input>
            <div style="width: 10px"></div>
            <!-- <el-checkbox v-model="check3" @change="stUpdate('check3', 3)"
              >选择</el-checkbox
            > -->
          </div>
        </el-form-item>
        <!-- 装线 -->
        <el-form-item label="装线：" prop="stFour">
          <div style="display: flex">
            <el-input
              type="text"
              style="font-size: 12px"
              v-model="genduo.stFour"
              placeholder="装线"
            ></el-input>
            <div style="width: 10px"></div>
            <!-- <el-checkbox v-model="check4" @change="stUpdate('check4', 4)"
              >选择</el-checkbox
            > -->
          </div>
        </el-form-item>

        <!-- 打包 -->
        <el-form-item label="打包：" prop="stFive">
          <div style="display: flex">
            <el-input
              type="text"
              style="font-size: 12px"
              v-model="genduo.stFive"
              placeholder="打包"
            ></el-input>
            <div style="width: 10px"></div>
            <!-- <el-checkbox v-model="check5" @change="stUpdate('check5', 5)"
              >选择</el-checkbox
            > -->
          </div>
        </el-form-item>

        <!-- 附加费 -->
        <el-form-item label="附加费：" prop="surPrice">
          <div style="display: flex">
            <el-input
              type="text"
              style="font-size: 12px"
              v-model="genduo.surPrice"
              placeholder="打包"
            ></el-input>
            <div style="width: 10px"></div>
            <!-- <el-checkbox v-model="check6" @change="stUpdate('check6', 6)"
              >选择</el-checkbox
            > -->
          </div>
        </el-form-item>

        <!-- 错误原因 -->
        <el-form-item label="错误原因：" prop="count">
          <el-input
            type="text"
            v-model="genduo.count"
            placeholder="错误原因"
          ></el-input>
        </el-form-item>

        <!-- 负责人 -->
        <el-form-item label="负责人：" prop="head">
          <el-input
            type="text"
            v-model="genduo.head"
            placeholder="负责人"
          ></el-input>
        </el-form-item>

        <!-- 处罚情况 -->
        <el-form-item label="处罚情况：" prop="triggerSituation">
          <el-input
            type="text"
            v-model="genduo.triggerSituation"
            placeholder="处罚情况"
          ></el-input>
        </el-form-item>

        <!-- 出货单 -->
        <el-form-item label="出货单：" prop="deliveryId">
          <el-input
            type="text"
            v-model="genduo.deliveryId"
            placeholder="出货单"
          ></el-input>
        </el-form-item>

        <!-- 备注 -->
        <el-form-item label="备注：" prop="count">
          <el-input
            type="text"
            v-model="genduo.count"
            placeholder="备注"
          ></el-input>
        </el-form-item>
      </el-form>

      <!-- {{ genduo }} -->
    </el-dialog>

    <!-- 新增产品 -->
    <el-dialog
      style="margin-top: 0"
      :visible.sync="addFromDialog"
      width="50%"
      :show-close="false"
      :title="title"
    >
      <el-form
        :model="prudproducts"
        :inline="true"
        ref="prudproducts"
        label-width="100px"
        class="demo-ruleForm"
      >
      </el-form>
      <!--  -->
      <el-form
        :model="prudproducts"
        :inline="true"
        ref="prudproducts"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="客户名称：" prop="name">
          <el-input
            type="text"
            v-model="prudproducts.name"
            placeholder="客户名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="版号：" prop="versionNumber">
          <el-input
            type="text"
            v-model="prudproducts.versionNumber"
            placeholder="版号"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品名称：" prop="productName">
          <el-input
            type="text"
            v-model="prudproducts.productName"
            placeholder="产品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="价格：" prop="price">
          <el-input
            type="text"
            v-model="prudproducts.price"
            placeholder="价格"
          ></el-input>
        </el-form-item>

        <el-form-item label="交货日期" prop="deliveryTime">
          <el-input
            type="text"
            v-model="prudproducts.deliveryTime"
            placeholder="数量"
          ></el-input>
        </el-form-item>

        <el-form-item label="是否发货：" prop="isIncludingTax">
          <el-select v-model="prudproducts.isSend" placeholder="是否发货">
            <el-option
              v-for="item in SexCategory"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitaddEmployeeForm" v-debounce>
			确 定
		</el-button>
        <el-button type="primary" @click="UpdateEmployee(1)" v-debounce>
			修 改
		</el-button>
        <el-button type="primary" @click="UpdateEmployee(2)" v-debounce>
			新增产品
		</el-button>
        <el-button @click="addFromDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {
  updateOrderStatus, //用户修改自己做的订单状态
  getOrderListByUser, //查询用户自己的订单
  getIncomeRanking, //收益排行
  getOrderCommission, //查询订单佣金
  getOrderListByLikeAndUser, //通过入库名称搜索框查询
} from "../../api/die.js";
export default {
  components: {},
  data() {
    return {
      qx: false,
      userid: "",
      yuer: "",
      hovering: false, // 用于判断鼠标是否在按钮上
      tableDataDay: [],
      //查询内容
      datebase: "-1",
      options4: [
        { value: "-1", label: "全部" },
        { value: "1", label: "今天" },
        { value: "7", label: "一周内" },
        { value: "30", label: "一个月内" },
        { value: "365", label: "一年内" },
      ],
      check1: false,
      check2: false,
      check3: false,
      check4: false,
      check5: false,
      check6: false,
      //搜索框的值
      input: "",
      // 图片预览
      srcList: [],
      srcList2: [],
      //新增标题
      title: "新增产品",
      roleType: false,
      cover: "cover",
      // 显示表单
      addFromDialog: false,
      addFromDialog2: false,
      addFromDialog3: false,
      addFromDialog4: false,
      // 表格加载
      loading: false,
      //合同到期提醒
      dialogImageUrl: "",
      dialogVisible: false,
      genduo: "", //查看更多
      //新增订单数据
      prudproducts: {
        name: "",
        versionNumber: "",
        productName: "",
        price: "",
        deliveryTime: "",
        isSend: "",
      },
      tableData: [],
      //总数页
      total: 0,
      //是否发货
      SexCategory: [
        { value: 0, label: "是" },
        { value: 1, label: "否" },
      ],
      // 分页大小
      pageSize: 50,
      //记录当前页数
      currentPage: 1,
      //审核通过状态
      applyStatus: false,
    };
  },
  mounted() {
	let userObject = JSON.parse(localStorage.getItem("userInfo"));
    // kese.roleid == "9" ? (this.qx = true) : (this.qx = false);
    this.qx = userObject.roleId == "10" ? false : true;
    console.log("用户信息====>", userObject);
    this.userid = userObject.nickName;
    if (userObject.roleId == "1" || userObject.roleId == "10") {
      this.roleType = true;
    }
    //查看分红排名
    this.dayPlay();
    this.getAllGoods();
    console.log("初始化时间:", dayjs());
    //通过入库名称搜索框查询
  },
  //超级管理员显示功能
  methods: {
    // 序号序列化
    serializeNumber(num) {
      if (num < 10) {
        return "00" + num;
      } else if (num < 100) {
        return "0" + num;
      } else {
        return num.toString();
      }
    },
    tableRowClassName({ row }) {
      console.log("row", row);
      let k = 0;
      if (row.stOne != "" && row.stOne != null) {
        k++;
      }
      if (row.stTwo != "" && row.stTwo != null) {
        k++;
      }
      if (row.stThree != "" && row.stThree != null) {
        k++;
      }
      if (row.stFour != "" && row.stFour != null) {
        k++;
      }
      if (row.stFive != "" && row.stFive != null) {
        k++;
      }
      if (row.surPrice != "" && row.surPrice != null) {
        k++;
      }

      if (k >= 4) {
        console.log("大4");
        return { background: "#cfffd7" };
      } else if (k >= 2 && k < 4) {
        console.log("大2");
        return { background: "#b3d8ff" };
      }
      console.log("大0");
      return { background: "#ffe1e1" };
    },
    // 格式化时间
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = (d.getMonth() + 1).toString().padStart(2, "0");
      const day = d.getDate().toString().padStart(2, "0");
      const hours = d.getHours().toString().padStart(2, "0");
      const minutes = d.getMinutes().toString().padStart(2, "0");
      const seconds = d.getSeconds().toString().padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      // return `${year}-${month}-${day}`;
    },
    startTimeChange(value) {
      this.addEmployeeForm.startTime = dayjs(value).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      console.log("上架时间", dayjs(value).format("YYYY-MM-DD HH:mm:ss"));
    },
    endTimeChange(value) {
      this.addEmployeeForm.endTime = dayjs(value).format("YYYY-MM-DD HH:mm:ss");
      console.log("上架时间", dayjs(value).format("YYYY-MM-DD HH:mm:ss"));
    },

    //用户修改自己做的订单状态
    stUpdate(ch) {
      let type = "";
      let status = "2";
      if (ch == "check1") {
        type = 1;
        if (this.check1) {
          status = "1";
        }
      } else if (ch == "check2") {
        type = 2;
        if (this.check2) {
          status = "1";
        }
      } else if (ch == "check3") {
        type = 3;
        if (this.check3) {
          status = "1";
        }
      } else if (ch == "check4") {
        type = 4;
        if (this.check4) {
          status = "1";
        }
      } else if (ch == "check5") {
        type = 5;
        if (this.check5) {
          status = "1";
        }
      } else if (ch == "check6") {
        type = 6;
        if (this.check6) {
          status = "1";
        }
      }

      this.updcha(type, status);
    },
    handleMouseEnter(id) {
      getOrderCommission(id).then((data) => {
        this.yuer = data.data;
      });
      // 当鼠标移入时执行的方法
      console.log("Mouse entered!");
      // 这里可以调用其他需要执行的方法
    },
    handleMouseLeave() {
      // 当鼠标移出时执行的方法
      console.log("Mouse left!");
      // 这里也可以调用其他需要执行的方法
    },
    //查看更多
    more(row) {
      this.check1 = false;
      this.check2 = false;
      this.check3 = false;
      this.check4 = false;
      this.check5 = false;
      this.check6 = false;

      this.addFromDialog2 = true;
      this.genduo = row;
      //从本地拿到用户信息
      let user = localStorage.getItem("userInfo");
      let userObject = JSON.parse(user);
      let stOneArr = this.genduo.stOne
        ? this.genduo.stOne.split(",").filter((item) => item !== "")
        : [];
      let stTwoArr = this.genduo.stTwo
        ? this.genduo.stTwo.split(",").filter((item) => item !== "")
        : [];
      let stThreeArr = this.genduo.stThree
        ? this.genduo.stThree.split(",").filter((item) => item !== "")
        : [];
      let stFourArr = this.genduo.stFour
        ? this.genduo.stFour.split(",").filter((item) => item !== "")
        : [];
      let stFiveArr = this.genduo.stFive
        ? this.genduo.stFive.split(",").filter((item) => item !== "")
        : [];
      let stSixArr = this.genduo.surPrice
        ? this.genduo.surPrice.split(",").filter((item) => item !== "")
        : [];

      let optArr = [
        stOneArr,
        stTwoArr,
        stThreeArr,
        stFourArr,
        stFiveArr,
        stSixArr,
      ];

      for (let i = 0; i < optArr.length; i++) {
        for (let j = 0; j < optArr[i].length; j++) {
          if (optArr[i][j] == userObject.nickName) {
            switch (i) {
              case 0:
                this.check1 = true;
                break;
              case 1:
                this.check2 = true;
                break;
              case 2:
                this.check3 = true;
                break;
              case 3:
                this.check4 = true;
                break;
              case 4:
                this.check5 = true;
                break;
              case 5:
                this.check6 = true;
                break;
            }
          }
        }
      }
    },

    //用户修改
    updcha(type, status) {
      updateOrderStatus(this.genduo.customId, type, status).then((data) => {
        if (data.code) {
          this.$message({
            type: "success",
            message: "修改成功",
          });
          //刷新数据
          this.getAllGoods();
        } else {
          this.$message({
            type: "error",
            message: "修改失败",
          });
        }
      });
    },

    // 新增产品
    submitaddEmployeeForm() {
      //交货日期
      createOrder(this.prudproducts).then((data) => {
        if (data.code) {
          this.$message({
            type: "success",
            message: "新增成功",
          });
          this.getAllGoods();
        } else {
          this.$message({
            type: "error",
            message: "新增失败",
          });
        }
      });
      this.addFromDialog = false;
    },

    dayPlay() {
      getIncomeRanking(this.datebase).then((res) => {
        if (res.code) {
          // 为每一条数据添加排名序号,如果当前类型不是true,则不显示金额,只显示自己的金额
          let kt = [];
          res.data.forEach((item, index) => {
            if (!this.roleType) {
              if (item.userId != this.userid) {
                item.price = "****";
              }
            }

            let kb = {
              rank: index + 1,
              userId: item.userId,
              price: item.price,
            };
            kt.push(kb);
          });
          this.tableDataDay = kt;

          //           this.tableDataDay = res.data.map((item, index) => ({
          //   rank: index + 1,
          //   userId: item.userId,
          //   price: item.price,
          // }));
        } else {
          this.$message("列表加载错误");
        }
        console.log("获取商品列表");
      });
    },
    //模糊查询信息
    likeEmployee() {
      getOrderListByLikeAndUser(this.input).then((res) => {
        if (res.code) {
          this.tableData = res.data;
        } else {
          this.$message("列表加载错误");
        }
        console.log("获取商品列表");
      });
    },

    //初始化图片
    imgstatus() {
      let url =
        "https://kris-k.oss-cn-hangzhou.aliyuncs.com/kris/c179093a-41b0-4c70-bc1f-6e5973f35c98-jia.png";
      this.imageUrl = url;
      this.imageUrl2 = url;
    },

    // 查询列表
    getAllGoods() {
      //   this.loading = true;
      getOrderListByUser(this.currentPage, this.pageSize).then((res) => {
        if (res.code) {
          this.total = res.data.total;
          this.tableData = res.data.dieOrderList.map((item, index) => {
            item.i = (this.currentPage - 1) * this.pageSize + index + 1;
            return item;
          });
          //   this.loading = false;
        } else {
          this.$message("列表加载错误");
        }
        console.log("获取商品列表");
      });
    },
    // pageSize变化
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getAllGoods();
    },
    // 页码变化
    handleCurrentChange(curPage) {
      this.currentPage = curPage;
      this.getAllGoods();
    },
  },
};
</script>

<style>
.statistics {
  height: 100%;
}

.page {
  text-align: center;
}

.table01 .row-delivered {
  background-color: #ffe4e4; /* 红色未完成,0项 */
}
.table01 .row-pending {
  background-color: #36c0f4; /* 蓝色背景，两项 */
}
.table01 .row-ok {
  background-color: #d4ffdb; /* 绿色完成背景，表示已交付 */
}
.nameBox {
  overflow: auto; /* 显示滚动条 */
  z-index: 99;
  margin-top: 5px;
  font-size: 12px;
  text-align: center;
  width: 205px;
  height: 170px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  position: absolute;
}

.goods-table {
  height: 94%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  margin-top: 10px;
}
.imgUrl {
  width: 100px;
  height: 100px;
  object-fit: cover; /* 保持原始宽高比，填充容器 */
}
.htimg {
  width: 150px;
  height: 150px;
  object-fit: cover; /* 保持原始宽高比，填充容器 */
}
</style>
